<template>
  <div class="accountRecharge">
    <el-card shadow="never">
      <h4 class="title">提交工单</h4>
      <el-divider></el-divider>
      <div style="text-align: left">
        <el-card>
          <el-form :inline="true" :model="imgFormData" class="demo-form-inline">
            <el-form-item label="提交用户：" v-if="this.$store.state.user.role == 'admin'">
              <el-select class="ss" size="medium" v-model="imgFormData.username" placeholder="提交用户" clearable>
                <el-option v-for="item in useroptions" :key="item.id" :label="item.username" :value="item.username">
                </el-option>
              </el-select>
            </el-form-item>
            <br />
            <el-form-item label="工单标题：">
              <el-input class="ss" v-model="imgFormData.title" placeholder="请输入工单标题"
                :autosize="{ minRows: 1, maxRows: 4 }" type="textarea" clearable></el-input>
            </el-form-item>
            <br />
            <el-form-item label="咨询模块：">
              <el-select class="ss" v-model="imgFormData.type" clearable placeholder="请选择您要提交的类型">
                <el-option v-for="item in orderoptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <br />
            <el-form-item label="问题描述：">
              <el-input class="ss" v-model="imgFormData.describe" placeholder="请输入问题描述" :autosize="{ minRows: 6 }"
                type="textarea" clearable></el-input>
            </el-form-item>
          </el-form>
          上传截图：
          <div class="screenshot">
            <el-upload style="margin-left: 90px;" :class="{ hide: hideUploadEdit }" action="#" list-type="picture-card" :http-request="onUpload"
              accept=".jpg,.jgeg,.png" :auto-upload="false" ref="upload" :limit="1" :file-list="fileList"
              :on-change="handlePicChange">
              <i slot="default" class="el-icon-upload">上传截图</i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <br />
            <span style="color: #e4e5e6">(每个截图大小不得超5M。不能包含中文，支持的格式有:'jpg', 'jpeg',
              'png','gif')</span>
          </div>
        <el-button type="primary" class="btm" @click="submitUpload()" :disabled="false">提交工单</el-button>

        </el-card>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUsername } from "@/api/order";
import { addWorkOrder } from "@/api/titck";
import { title } from "@/settings";

export default {
  data() {
    return {
      orderoptions: [
        {
          value: "APi使用",
          label: "APi使用",
        },
        {
          value: "需求咨询",
          label: "需求咨询",
        },
        {
          value: "充值付费",
          label: "充值付费",
        },
        {
          value: "账户设置",
          label: "账户设置",
        },
        {
          value: "意见反馈",
          label: "意见反馈",
        },
      ],
      imgFormData: {
        title: "",
        //描述
        describe: "",
        //   用户名
        username: "",
        // 充值方式
        type: "",
        // 备注
        params: "",
      },
      all: "all",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      hideUploadEdit: false, // 是否隐藏上传按钮
      fileList: [],
      // 上传按钮禁用
      submitDis: true,
      // 下拉框
      useroptions: [],
    };
  },
  async created() {
    // 获取用户名

    let res = await getUsername({ all: "all" });
    // if (res.status == 0) {
    this.useroptions = res.data;
    // }
  },
  methods: {
    // 上传文件
    async onUpload(file) {
      if (file.file.size < 5 * 1024 * 1024) {
        let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (!reg.test(file.file.name)) {
          if (
            this.$store.state.user.role != "admin" ||
            !this.imgFormData.username
          ) {
            this.imgFormData.username = localStorage.getItem("username");
          }
          let formData = new FormData();
          let { username, params, describe, type, title } = this.imgFormData;
          formData.append("file", file.file);
          formData.append("username", username);
          // formData.append("params", params);
          formData.append("type", type);
          formData.append("describe", describe);
          formData.append("title", title);

          await addWorkOrder(formData);
        } else {
          this.$message({
            message: "上传图片的名称不能含有中文",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "上传图片过大，请重新上传",
          type: "warning",
        });
      }
    },
    // 确认上传
    submitUpload() {
      if (this.hideUploadEdit) {
        this.$refs.upload.submit();
        this.$refs.upload.clearFiles();
        this.hideUploadEdit = this.fileList.length >= 1;
        this.imgFormData.username = "";
        this.imgFormData.params = "";
        this.imgFormData.describe = "";
        this.submitDis = true;
      } else {
        this.$message({
          message: "请选择图片",
          type: "warning",
        });
      }
    },
    handleRemove(file) {
      this.$refs.upload.clearFiles();
      this.hideUploadEdit = this.fileList.length >= 1;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePicChange(file, fileList) {
      // 大于1张隐藏
      this.hideUploadEdit = fileList.length >= 1;
    },
  },
};
</script>
<style scoped>
.ss {
  width: 300px;
}

.btm {
  margin-top: 10px;
  margin-left: 110px;
}
</style>
<style scoped>
.el-upload {
  margin-left: 90px;
  height: 90px;
}
</style>
